<template>
  <div style="margin: 10px;">
    <div v-if="nameEdit==false" class="p-head">
      <span>{{ name }}</span>
      <i class="el-icon-edit name-edit" @click="nameEdit=!nameEdit"/>
    </div>
    <div v-if="nameEdit" class="p-head">
      <el-input v-model="name" size="mini" placeholder="Enter Name" @blur="nameEdit=false"/>
    </div>
    <el-input v-model="url" placeholder="Enter request URL" class="input-with-select m-t-10">
      <el-select slot="prepend" v-model="requestMethod" placeholder="Select Method">
        <el-option label="GET" value="GET"/>
        <el-option label="POST" value="POST"/>
        <el-option label="PUT" value="PUT"/>
        <el-option label="DELETE" value="DELETE"/>
      </el-select>
      <el-button slot="append" icon="el-icon-search"/>
    </el-input>
  </div>
</template>
<style scoped>
.p-head {
    width: 300px;
}
.name-edit {
    visibility: hidden
}
.p-head:hover .name-edit {
    visibility: visible;
}
.el-select .el-input {
width: 130px;
}
</style>

<script>
export default {
  name: 'Postman',
  data() {
    return {
      name: 'name',
      nameEdit: false,
      requestMethod: 'GET',
      url: '',
      headers: {},
      params: { key: '', value: '', desc: '' },
      paramsList: [],
      bodyType: 'form-data',
      bodyTypeOption: ['form-data', 'x-www-form-urlencoded', 'raw', 'binary'],
      bodyFromDataList: [],
      bodyFromData: { key: '', value: '', desc: '' },
      bodyXWWWFromDataList: [],
      bodyXWWWFromData: { key: '', value: '', desc: '' },
      bodyRaw: '',
      bodyRawType: ['Text', 'JSON(application/json)']
    }
  }
}
</script>

